<template>
  <div>
    <div class="container"
         :style="{'--expend-image':'url('+ src +')','--expend-width': imgWidth,'--expend-height':imgHeight}">
      <span class="text-before-img-title">{{ text }}</span>
    </div>
  </div>

</template>
<script>
export default {
  name: "gwTextBeforeImg",
  data() {
    return {
      imgW: "",
      imgH: "",
    };
  },
  props: {
    src: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "",
    },
    imgWidth: {
      type: String,
      default: "50px",
    },
    imgHeight: {
      type: String,
      default: "20px",
    },
  },
};
</script>
<style lang="scss" scoped>
@mixin lineClamp($lines) {
  overflow: hidden; //超出的文本隐藏号
  text-overflow: ellipsis; //溢出用省略
  display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
  -webkit-line-clamp: $lines; //控制显示的行数
  -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式)
  word-break: break-all;
  word-wrap: break-word;
  line-break: anywhere;
}
.container {
  position: relative;
  .text-before-img-title {
    font-weight: 500;
    font-size: 18px;
    color: #0f1114;
    @include lineClamp(2);
    &::before {
      content: "";
      display: inline-block;
      position: relative;
      top: 3px;
      width: var(--expend-width);
      height: var(--expend-height);
      margin-right: 8px;
      background-image: var(--expend-image);
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      // background-color: red;
    }
  }
}
</style>